﻿<div id="div_Taquilla">

<div class="row-fluid">
      <div class="span8">

        <legend>Seleccionar Butaca</legend>

        <div class="row-fluid">
          <div class="span12 ">

            <h5>Butacas Disponibles</h5>

              <div class="butacas well"> 

                  <ul data-bind="foreach: butacas.primerPiso.primera" data-bind="click: $parent.selectedButaca" >
                      <!-- ko if: $data.IsOcupado === true -->
                      <li><a href="#" class="btn btn-danger btn-mini disabled"><span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                      <!-- ko if: $data.IsOcupado === false -->
                      <li><a href="#" class="btn btn-success btn-mini" data-bind="click: $parent.selectedButaca" ><span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                  </ul>
                  
                  <ul data-bind="foreach: butacas.primerPiso.segunda">
                      <!-- ko if: $data.IsOcupado === true -->
                      <li><a href="#" class="btn btn-danger btn-mini disabled"<span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                      <!-- ko if: $data.IsOcupado === false -->
                      <li><a href="#" class="btn btn-success btn-mini" data-bind="click: $parent.selectedButaca" ><span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                  </ul>                  
                  
                   <ul style="padding-top:10px" data-bind="foreach: butacas.primerPiso.tercera">
                      <!-- ko if: $data.IsOcupado === true -->
                      <li><a href="#" class="btn btn-danger btn-mini disabled"><span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                      <!-- ko if: $data.IsOcupado === false -->
                      <li><a href="#" class="btn btn-success btn-mini" data-bind="click: $parent.selectedButaca" ><span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                  </ul>                  
                  
                  <ul data-bind="foreach: butacas.primerPiso.cuarta">
                      <!-- ko if: $data.IsOcupado === true -->
                      <li><a href="#" class="btn btn-danger btn-mini disabled"><span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                      <!-- ko if: $data.IsOcupado === false -->
                      <li><a href="#" class="btn btn-success btn-mini" data-bind="click: $parent.selectedButaca" ><span data-bind="text: $data.NumeroButaca">
                      </span></a></li>
                      <!-- /ko -->
                  </ul>    
                         
               </div>
          </div>          

        </div>
        
        <div class="row-fluid">
          <div class="span12"></div>
        </div>

      </div>
    <div class="span4">

    
      <div class="row-fluid pricing-table pricing-three-column">
        <div class="span12 plan">
          <div class="plan-name-gold">
            <h2><span data-bind="text: precioFinal"></span></h2>
          </div>
          <ul>
            <li class="plan-feature"></li>
            <li class="plan-feature" data-bind="text: detalleTramo"></li>
            <li class="plan-feature" data-bind="text: numeroAsiento"></li>
            <li class="plan-feature" data-bind="text: busTiposervicio"></li>
            <li class="plan-feature"><a href="#"  data-bind="click: btnComprarTicket_onClick" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i>Comprar</a></li>
          </ul>
        </div>
      </div>
      

    </div>

</div>

</div>

<script type="text/javascript" src="../../Scripts/Views/Taquilla.js" </script>

